<extend name="Base/common"/>

<block name="content">
	<!-- section 1 -->
	<div class="page-section" style="padding:50px;height: 400px;">
		<div class="wrap" style="padding:10px;">
			<div class="fl" style="width:480px;">
				<div id="left_content" style="margin-top:0px;margin-right:40px;">
					<h1 style="font-size:42px;color:#9933CC;">什么是HoloLens？</h1>
					<h5 style="font-size:16px;line-height: 1.5;text-indent:2em;">
						<p>Microsoft HoloLens全息眼镜是由微软公司于北京时间2015年1月22日发布的一款革命性产品。</p>
						<p>全息影像技术是计算领域下一个发展！有了这个愿景，硬件、软件、设计工程师一起为创造者和开发者提供了一个新的平台。</p>
						<p>HoloLens提出了这个强大的全息平台。全息计算时代来了!</p>
					</h5>
				</div>
			</div>
			<div class="fr">
				<img src="__IMG__/introduce_1.jpg" width="500">
			</div>
			
		</div>		
	</div>
	<!-- section 2 -->
	<div class="page-section" style="padding:50px;height: 400px;background-color:#0073c6">
		<div class="wrap" style="padding:10px;">			
			<div class="fl" style="margin-top:40px;">
				<img src="__IMG__/introduce_2.png" width="500">
			</div>
			<div class="fr" style="width:480px;">
				<div id="left_content" style="margin-top:30px;margin-left:40px;">
					<h1 style="font-size:42px;color:#fff;">搭载Windows 10</h1>
					<h5 style="font-size:16px;line-height: 1.5;text-indent:2em;color:#fff;">
						<p>Windows 10由微软公司于北京时间2014年10月1日发布。</p>
						<p>Windows 10除了支持传统PC、平板、手机、Surface系列设备，还将支持跨时代的HoloLens全息眼镜。HoloLens将在Windows 10的时间表内上市！</p>
					</h5>
				</div>
			</div>
		</div>		
	</div>
	<!-- section 3 -->
	<div class="page-section" style="padding:50px;height: 450px;">
		<div class="wrap" style="padding:10px;">
			<div class="fl" style="width:480px;">
				<div id="left_content" style="margin-top:0px;margin-right:40px;">
					<h1 style="font-size:42px;color:#9933CC;">将世界转化为全息影像</h1>
					<h5 style="font-size:16px;line-height: 1.5;text-indent:2em;">						
						<p>超越屏幕！</p>
						<p>一切都是真实的!</p>
						<p>更自然的相互作用方式!</p>
						<p>将工作、学习可视化的新方式！</p>
						<p>教学、探索的新方式！</p>
						<p>创建自己想象世界的新方式！</p>
						<p>探索你从未见过的事物！</p>
						<p>数码世界将会与现实世界相联通！</p>						
					</h5>
				</div>
			</div>
			<div class="fr" style="width:500px;">
				<script type="text/javascript" src="__STATIC__/unslider.js"></script>
				<div class="banner">
	    			<ul>
	    				<li><img src="__IMG__/introduce_slide_1.jpg" width="500"></li>   			
	    	    		<li><img src="__IMG__/introduce_slide_2.jpg" width="500"></li>
	    	   			<li><img src="__IMG__/introduce_slide_3.jpg" width="500"></li>
	    	   			<li><img src="__IMG__/introduce_slide_4.jpg" width="500"></li>
	    	   			<li><img src="__IMG__/introduce_slide_5.jpg" width="500"></li>
	    			</ul>
				</div>				
			</div>			
		</div>		
	</div>
	<!-- Section 4 -->
	<style type="text/css">
		a.play{
			color:#EEEEEE;
		}
		a.play :hover {
			color:#0073c6;
		}
	</style>
	<div class="page-section" style="padding:50px;height: 450px;background-color:#dddddd">
		<div class="wrap" style="padding:10px;">			
			<div class="fl" style="margin-top:10px;width:500px;height:333px;background:url(__IMG__/introduce_3.jpg) no-repeat;background-size:cover">
				<div style="margin-left:220px;margin-top:136px;">
				<a class="play" href="#" data-toggle="modal" data-target="#Modal" onclick="showVideo();">
					<h1 style="font-size:60px;width:60px;"><span class="glyphicon glyphicon-play-circle" aria-hidden="true"	></span></h1>
				</a>
				</div>
			</div>
			<div class="fr" style="width:480px;">
				<div id="left_content" style="margin-top:120px;margin-left:40px;">
					<h1 style="font-size:42px;">观看视频</h1>	
					<h5 style="font-size:16px;line-height: 1.5;">
						<p>（来源：微软 “The Next Chapter” 发布会）</h5>	</p>
					</h5>									
				</div>
			</div>
		</div>		
	</div>
	<!-- Modal -->
	<div class="modal" id="Modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden=	"true">
	  <div class="modal-dialog">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true" onclick="delVideo();">&times;</span></button>
	        <h4>观看视频</h4>
	      </div>
	      <div class="modal-body" id="videoContent"></div>
	    </div>
	  </div>
	</div>
	<!-- Videos -->
	<div id="video" style="display:none;">
		 <iframe height=400 width=570 src="http://player.youku.com/embed/XODc4MDQ4MjUy" frameborder=0 allowfullscreen></iframe>
	</div>
	<script type="text/javascript">
	$(function() {
		$('.banner').unslider({
				
				fluid: true,
				dots: true
		});
	});
	function showVideo() {
		var video = $('#video').html();
		$('#videoContent').html(video);
	}

	function delVideo() {
		$('#videoContent').html("");
	}
	</script>
</block>
